<template>
	<!-- <view class="userinfo">
		<image :src="avatar" mode="" class="avatar"></image>
		<view class="username">
			{{myname}}
		</view>
	</view> -->
	<view class="userinfo">
		<image :src="obj.avatar" mode="" class="avatar"></image>
		<view class="username">
			{{obj.name}}
		</view>
		<view class="">
			{{obj}}
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';

// 数据只能父组件处理,子组件使用

// 直接传过来的值不能修改
// const props = defineProps(['username','avatar'])
// 但是可以用计算属性修改
// const myname = computed(()=>props.username+"@") 

// prop校验与prop默认值，设置字符串类型，传值只能传字符串
// const props = defineProps({
// 	username:{
// 		type:String,
// 		default:"默认值"
// 	},
// 	avatar:{
// 		type:String,
// 		default:'../../static/logo.png'
// 	}
// })

defineProps({
	obj:{
		type:Object,
		default(){
			return{
				name:"匿名",
				avatar:"../../static/logo.png"
			}
		}
	}
})
</script>

<style lang="scss" scoped>
.userinfo{
	width: 100%;
	height: 200px;
	background: #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image{
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	.userinfo{
		padding: 10px 0;
		font-size: 20px;
	}
}
</style>